<template>
  <div>
    <el-row class="main">
      <div style="display: flex;
      align-items: center;
      background-color: #ffffff;
      padding: 5px;
      border-bottom: 1px solid #cccccc">
        <div>
          <img src="@/assets/image/向导.png" alt="">
        </div>
        <strong>
          ChatAI
        </strong>
      </div>
      <el-col class="main-menu" :xs="24" :sm="24" :md="2" :lg="2" :xl="2">
        <br>
        <el-menu router class="el-menu-vertical-demo">
          <el-menu-item index="/ChatView">
            <div class="main-menu-chat">
              <img style="width: 30px" src="@/assets/image/留言板.png" alt="">
              <span slot="title"> 对话</span>
            </div>
          </el-menu-item>
          <br>
          <el-menu-item index="/PaintingView">
            <div class="main-menu-image">
              <img style="width: 30px" src="@/assets/image/绘画.png" alt="">
              <span slot="title"> 绘画</span>
            </div>
          </el-menu-item>
        </el-menu>
      </el-col>
      <el-col class="main-child" :xs="24" :sm="24" :md="22" :lg="22" :xl="22">
        <router-view/>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "AiToolView"
}
</script>

<style>
.el-menu-item:focus, .el-menu-item:hover {
  background: none;
}
.el-menu{
  border: none;
}
</style>
<style lang="scss" scoped>
@import "@/assets/css/AiToolView.css";
</style>
